 <script src="__PUBLIC__/js/bootstrap-datetimepicker.min.js"></script>
 <script src="__PUBLIC__/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
 <link id="bsdp-css" href="__PUBLIC__/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script type="text/javascript">
    var j=0;
    function imgremove(target){
        if(confirm('是否移除该图片?')){
            $('#pre'+target).remove();
            $('#fm'+target).remove();
        }else{
            return;
        }
        
    }
    $("#product-image").bind("click",function(){
      $("#fileToUpload").click();
    });

    $('input[name="starttime"]').datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            todayBtn: "linked",
            language: "zh-CN",
            autoclose: true
    });
    $('input[name="endtime"]').datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            todayBtn: "linked",
            language: "zh-CN",
            autoclose: true
    });
    function fileSelectedimg(fileToUpload,target){
        var file = document.getElementById(fileToUpload).files;
        $(".progress").show();
        for (var i = 0;i <file.length; i++) {
            var fd = new FormData();
            fd.append("fileToUpload", document.getElementById(fileToUpload).files[i]);
            fd.append("target",target);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadCompleteimg, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "__APP__/Upload/medicalimgs");//修改成自己的接口
            xhr.send(fd);
        };    
    }

    function uploadCompleteimg(evt){
        j++;
         var res= JSON.parse(evt.target.responseText);
        if(res.status==1){
            $('#'+res.target).append("<img src='"+res.image+"' class='img-thumbnail' width='100' id='pre"+j+"' onclick='imgremove("+j+")'>  ");
            $('#product-form').append('<input type="hidden" name="imgs" id="fm'+j+'" value="'+res.image+'">');    
            $(".progress").hide();        
        }else{
            alert(res.msg);
        }       
    }

    function uploadCompletes(evt){
         var res= JSON.parse(evt.target.responseText);
        if(res.status==1){
            $('#'+res.target).html("<a id='docurl' target='_blank' href='"+res.docurl+"'>Preview</a> ");
            $('#'+res.target).show();
        }else{
            alert(res.msg);
        }       
    }


    function fileSelected(fileToUpload,target,id) {
        var file = document.getElementById(fileToUpload).files[0];
        if (file) {
            var fd = new FormData();
            fd.append("fileToUpload", document.getElementById(fileToUpload).files[0]);
            fd.append("target",target);
            fd.append("id",id);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "__APP__/Upload/medicalimg");//修改成自己的接口
            xhr.send(fd);
        }
    }
    function uploadProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                //document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            $(".progress-bar").css("width",function(){return percentComplete.toString() + '%'});
            $(".progress-bar").text(percentComplete.toString() + '%');
        }else {
            document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
    }
        
    function uploadComplete(evt) {
        /* 服务器端返回响应时候触发event事件*/
        //alert(evt.target.responseText);
        var res= JSON.parse(evt.target.responseText);
        if(res.status==1){
            $('#'+res.target).attr("src", res.image); 
        }else{
            alert(res.msg);
        }
    }
    function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
    }
    function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
    }

</script>
 <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">用户活动管理</h3>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            编辑用户活动
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                                <form role="form" id="product-form">
                                        <div class="form-group">
                                            <div class="media">
                                              <div class="media-left">
                                                <a href="#">
                                                  <img class="media-object" src="<if condition="$user.image eq ''">{$user.headimgurl}<else />{$user.image}</if>" alt="用户头像" width="100">
                                                </a>
                                              </div>
                                              <div class="media-body">
                                                <h4 class="media-heading"><b>{$user.name}</b></h4>
                                                <p>
                                                {:L('hospital')}:{$user.hospital}
                                                {:L('address')}:{$user.address}
                                                </p>
                                                <p>
                                                {:L('department')}:{$user.department}
                                                {:L('position')}:{$user.position}
                                                {:L('socialposition')}:{$user.socialposition}
                                                </p>
                                                <p>
                                                {:L('mobile')}:{$user.mobile}
                                                {:L('email')}:{$user.email}
                                                </p>
                                              </div>
                                            </div> 
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('cashtype')}</label>
                                            <select class="form-control" name="cashtype">
                                                <option value="1" <if condition="$event.cashtype eq '1'">selected="selected"</if>>免费</option>
                                                <option value="2" <if condition="$event.cashtype eq '2'">selected="selected"</if>>收费</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('isonline')}</label>
                                            <select class="form-control" name="isonline">
                                                <option value="1" <if condition="$event.isonline eq '1'">selected="selected"</if>>线上</option>
                                                <option value="2" <if condition="$event.isonline eq '2'">selected="selected"</if>>线下</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('eventlink')}</label>
                                            <input type="text" class="form-control" name="eventlink" value="{$event.eventlink}">
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('location')}</label>
                                            <select class="form-control" name="location">
                                                <volist name="area" id="vo">
                                                    <option value="{$vo.name}" <if condition="$event['location'] eq $vo['name']">selected="selected"</if>>{$vo.name}</option>
                                                </volist>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('price')}</label>
                                            <input type="text" class="form-control" name="price" value="{$event.price}">
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('eventimage')}</label>
                                            <div class="progress" style="display:none;width:200px;margin-top:12px;">
                                                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                                    60%
                                                </div>
                                            </div>
                                            <p id="upimgshow"><volist name="images" id="vo" key="k"><input type="hidden" name="imgs" id="fm{$k}" value="{$vo.image}"> <img src='{$vo.image}' class='img-thumbnail' width='100' id='pre{$k}' onclick='imgremove({$k})'>  </volist><p>
                                            <p><button class="btn btn-primary" id="upimg" onclick='$("#upimgs").click();return false;'>选择图片</button><input type="file" name="upimgs" id="upimgs" multiple="true" accept="image/*" onchange="fileSelectedimg('upimgs','upimgshow');" style="display:none;"/></p>
                                            <p class="help-block">可选择多张图片</p>
                                        </div>                                        
                                        <div class="form-group">
                                            <label>{:L('name')}</label>
                                            <input type="text" class="form-control" name="name" value="{$event.name}">
                                        </div>
                                        <div class="form-group form-inline">
                                            <label>{:L('organizer')}</label>
                                            <p></p>
                                            <div class="input-group col-lg-9">
                                                <input type="text" class="form-control" name="organizer-input" placeholder="主办机构名称">
                                            </div>
                                            <div class="input-group" id="organizer-{$vo.id}">
                                                <button class="form-control btn btn-default" onclick="organizer_add('organizer-{$vo.id}');return false;"><span class="glyphicon glyphicon-plus"></span></button>
                                            </div>
                                            <p></p>
                                            <div id="organizer-area">
                                            <volist name="organizer" id="vo">
                                            
                                            <div class="input-group col-lg-9" id="organizer-{$vo.id}">
                                                <input type="text" class="form-control" name="organizer" value="{$vo.name}">
                                            </div>
                                            <div class="input-group" id="organizer-{$vo.id}">
                                                <button class="form-control btn btn-default" onclick="ele_remove('organizer-{$vo.id}');return false;"><span class="glyphicon glyphicon-minus"></span></button>
                                            </div>
                                            <p id="organizer-{$vo.id}"></p>                                            
                                            </volist>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('period')}</label>
                                            <input type="text" class="form-control" name="period" value="{$event.period}">
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('starttime')}</label>
                                            <input type="text" class="form-control" name="starttime" value="{$event.starttime}">
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('endtime')}</label>
                                            <input type="text" class="form-control" name="endtime" value="{$event.endtime}">
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('major')}</label>
                                            <select class="form-control" name="major">
                                                <volist name="major" id="vo">
                                                    <option value="{$vo.name}" <if condition="$vo['name'] eq $event['major']">selected="selected"</if>>{$vo.name}</option>
                                                </volist>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('partitions')}</label>
                                            <input type="text" class="form-control" name="partitions" value="{$event.partitions}">
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('membercount')}</label>
                                            <input type="text" class="form-control" name="membercount" value="{$event.membercount}">
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('conditions')}</label>
                                            <textarea class="form-control" rows="3" name="conditions">{$event.conditions}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('description')}</label>
                                            <textarea class="form-control" rows="3" name="description">{$event.description}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('schedule')}</label>
                                            <textarea class="form-control" rows="3" name="schedule">{$event.schedule}</textarea>
                                        </div>                                                    
                                        <div class="form-group">
                                            <label>{:L('traffic')}</label>
                                            <textarea class="form-control" rows="3" name="traffic">{$event.traffic}</textarea>
                                        </div>                                   
                                        <div class="form-group form-inline">
                                            <label>{:L('contact')}</label>
                                            <p></p>
                                            <div class="input-group col-lg-3">
                                                <input type="text" class="form-control" name="contact-input-name" placeholder="联系人">
                                            </div>
                                            <div class="input-group col-lg-3">
                                                <input type="text" class="form-control" name="contact-input-mobile" placeholder="电话号码">
                                            </div>
                                            <div class="input-group col-lg-3">
                                                <input type="text" class="form-control" name="contact-input-email" placeholder="电子邮箱">
                                            </div>
                                            <div class="input-group">
                                                <button class="form-control btn btn-default" onclick="contact_add();return false;"><span class="glyphicon glyphicon-plus"></span></button>
                                            </div>
                                            <p></p>
                                            <div id="contact-area">
                                            <volist name="contact" id="vo">
                                            <div class="input-group col-lg-3" id="contact-{$vo.id}">
                                                <input type="text" class="form-control" name="contact-name" value="{$vo.name}">
                                            </div>
                                            <div class="input-group col-lg-3" id="contact-{$vo.id}">
                                                <input type="text" class="form-control" name="contact-mobile" value="{$vo.mobile}">
                                            </div>
                                            <div class="input-group col-lg-3" id="contact-{$vo.id}">
                                                <input type="text" class="form-control" name="contact-email" value="{$vo.email}">
                                            </div>
                                            <div class="input-group" id="contact-{$vo.id}">
                                                <button class="form-control btn btn-default" onclick="ele_remove('contact-{$vo.id}');return false;"><span class="glyphicon glyphicon-minus"></span></button>
                                            </div>
                                            <p id="contact-{$vo.id}"></p>
                                            </volist>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('tips')}</label>
                                            <textarea class="form-control" rows="3" name="tips">{$event.tips}</textarea>
                                        </div>
                                        <button type="button" class="btn btn-success" onclick="check()">提交</button>
                                        <button type="button" class="btn btn-danger" onclick="editurl('__APP__/Event/user/id/{$userid}/pubtype/{$pubtype}/p/{$page}');">关闭</button>
                                    </form>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->

        </div>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
        function check(){
            //imgs//
            var imgs = $("input[name='imgs']");
            var imgarr =new Array();
            for (var i = 0; i <imgs.length; i++) {
                imgarr.push(imgs[i].value);
            };
            
            //contacts
            var contact_name = $("input[name='contact-name']");
            var contact_mobile = $("input[name='contact-mobile']");
            var contact_email = $("input[name='contact-email']");

            var contactarr = new Array();

            for(var i=0;i<contact_name.length;i++){
                var data= (contact_name[i].value) +"|"+ (contact_mobile[i].value) +"|"+ (contact_email[i].value)
                contactarr.push(data);
            }
            
            //organizer
            var organizer_name = $("input[name='organizer']");
            var organizerarr = new Array();
            for (var i=0;i<organizer_name.length;i++){
                organizerarr.push(organizer_name[i].value);
            }
            
            //

            var cashtype = $.trim($("select[name='cashtype']").val());
            var isonline = $.trim($("select[name='isonline']").val());
            var eventlink = $.trim($("input[name='eventlink']").val());
            var location = $.trim($("select[name='location']").val());
            var price = $.trim($("input[name='price']").val());
            var images = imgarr.join(',');
            var name = $.trim($("input[name='name']").val());
            var organizers = organizerarr.join(',');
            var period = $.trim($("input[name='period']").val());
            var starttime = $.trim($("input[name='starttime']").val());
            var endtime = $.trim($("input[name='endtime']").val());
            var major = $.trim($("select[name='major']").val());
            var partitions = $.trim($("input[name='partitions']").val());
            var membercount = $.trim($("input[name='membercount']").val());
            var conditions = $.trim($("textarea[name='conditions']").val());
            var description = $.trim($("textarea[name='description']").val());
            var schedule = $.trim($("textarea[name='schedule']").val());
            var traffic = $.trim($("textarea[name='traffic']").val());
            var contacts = contactarr.join(',');
            var tips = $.trim($("textarea[name='tips']").val());
            var id={$event.id};

            if(!price || isNaN(price)){
                $("input[name='price']").parent().addClass('has-error');
                return;
            }
            if(!images){
                images=0;
                return;
            }
            if(!name){
                $("input[name='name']").parent().addClass('has-error');
                return;
            }
            if(!organizers){
                organizers=0;
                return;
            }
            if(!period){
                $("input[name='period']").parent().addClass('has-error');
                return;
            }
            if(!starttime){
                $("input[name='starttime']").parent().addClass('has-error');
                return;
            }
            if(!endtime){
                $("input[name='endtime']").parent().addClass('has-error');
                return;
            }
            if(!partitions){
                $("input[name='partitions']").parent().addClass('has-error');
                return;
            }
            if(!membercount || isNaN(membercount)){
                $("input[name='membercount']").parent().addClass('has-error');
                return;
            }            
            if(!conditions){
                $("textarea[name='conditions']").parent().addClass('has-error');
                return;
            }
            if(!description){
                $("textarea[name='description']").parent().addClass('has-error');
                return;
            }
            if(!schedule){
                $("textarea[name='schedule']").parent().addClass('has-error');
                return;
            }
            if(!traffic){
                $("textarea[name='traffic']").parent().addClass('has-error');
                return;
            }
            if(!contacts){
                contacts=0;
                return;
            }
            if(!tips){
                $("textarea[name='tips']").parent().addClass('has-error');
                return;
            }
            $.post('__APP__/Event/edit',{
                    cashtype:cashtype,
                    isonline:isonline,
                    eventlink:eventlink,
                    location:location,
                    price:price,
                    images:images,
                    name:name,
                    organizers:organizers,
                    period:period,
                    starttime:starttime,
                    endtime:endtime,
                    major:major,
                    partitions:partitions,
                    membercount:membercount,
                    conditions:conditions,
                    description:description,
                    schedule:schedule,
                    traffic:traffic,
                    contacts:contacts,
                    tips:tips,
                    id:id,
                },function(data){
                if(data.status==1){
                    alert('操作成功');
                    editurl('__APP__/Event/user/id/{$userid}/pubtype/{$pubtype}/p/{$page}');
                }else{
                    //alert('操作失败');
                    alert(data.msg);
                }
            });

        }

        //
        var i=999;

        function ele_remove(e){
            var obj=$("div[id='"+e+"']");
            obj.each(function(){
                obj.remove();
            })
        }
        function contact_add(){
            var name=$("input[name='contact-input-name']").val();
            var mobile=$("input[name='contact-input-mobile']").val();
            var email=$("input[name='contact-input-email']").val();
            $("#contact-area").append('<div class="input-group col-lg-3" id="contact-'+i+'"><input type="text" class="form-control" name="contact-name" value="'+name+'"></div> <div class="input-group col-lg-3" id="contact-'+i+'"><input type="text" class="form-control" name="contact-mobile" value="'+mobile+'"></div> <div class="input-group col-lg-3" id="contact-'+i+'"> <input type="text" class="form-control" name="contact-email" value="'+email+'"></div> <div class="input-group" id="contact-'+i+'"><button class="form-control btn btn-default" onclick="ele_remove(\'contact-'+i+'\');return false;"><span class="glyphicon glyphicon-minus"></span></button></div><p id="contact-'+i+'"></p>');
            $("input[name='contact-input-name']").val('');
            $("input[name='contact-input-mobile']").val('');
            $("input[name='contact-input-email']").val('');

            i++;
        }
        function organizer_add(){
            var name = $("input[name='organizer-input']").val();
            $("#organizer-area").append('<div class="input-group col-lg-9" id="organizer-'+i+'"><input type="text" class="form-control" name="organizer" value="'+name+'"></div> <div class="input-group" id="organizer-'+i+'"><button class="form-control btn btn-default" onclick="ele_remove(\'organizer-'+i+'\');return false;"><span class="glyphicon glyphicon-minus"></span></button></div><p id="organizer-'+i+'"></p>');
            $("input[name='organizer-input']").val('');            
        }
    </script>

</body>

</html>
